<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>富文本输入框</title>
    <style>
      #richTextInput {
        width: 100%;
        height: 200px;
        border: 1px solid #ccc;
        padding: 10px;
        box-sizing: border-box;
        resize: none;
      }
      #richTextDisplay {
        margin-top: 10px;
        border: 1px solid #ccc;
        padding: 10px;
        min-height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="richTextInput" contenteditable="true"></div>
    <div id="richTextDisplay"></div>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const inputDiv = document.getElementById("richTextInput");
        const displayDiv = document.getElementById("richTextDisplay");

        inputDiv.addEventListener("input", function () {
          displayDiv.innerHTML = ""; // 清空展示区
          let paragraphs = this.innerText.split("\n\n"); // 基于两个换行符分割成段落
          paragraphs.forEach((paragraph) => {
            if (paragraph.trim()) {
              // 如果段落非空
              let p = document.createElement("p");
              p.textContent = paragraph;
              displayDiv.appendChild(p);
            }
          });
        });
      });
    </script>
  </body>
</html>
